import FooterPage from "@/components/footer-page";

export default {
  components: {
    FooterPage,
  },
  activated() {
    if (this.loadDataDirectory) {
      this.getTableData();
      // 重新进入页面，清空选中的数据
      if (this.multipleFlag) {
        this.checkedData = [];
      }
    }
  },
  data() {
    return {
      // 总数
      total: 0,
      // 当前页码数
      currentPage: 1,
      // 一页多少条
      pageSize: 15,
      // 数据
      tableData: [],
      // 存储搜索栏中的数据
      searchObj: {},
      // 内容区域loading
      loading: false,
      // 整体的loading
      // containerLoading: false,
      // 直接拉取列表数据
      loadDataDirectory: true,
      // 第一次加载列表数据
      firstLoad: true,
      // 是否为分页的列表
      isPageData: true,
      // 动态控制loading：设置为true的时候，需要配合closeLoading方法同时使用
      dynamicLoadingFlag: false,
      // 调用接口的开关
      loadSwitch: true,
      // --------------------多选表格用到的变量(start)--------------------
      // 注意：需要在el-table上设置ref="table"，用于数据的回显
      // 选择事件不能使用selection-change，不然在切换页面、切换页数时会莫名触发一次
      // 要使用select、select-all来进行监听
      // 数据删除掉，要及时比对下checkedData中是否有这条数据，相应的要删除掉
      // 是否为多选table
      multipleFlag: false,
      // 选中的数据
      checkedData: [],
      // 通用的都是id，配合table多选使用
      // --------------------多选表格用到的变量(end)--------------------
      // --------------------缓存数据的变量(start)--------------------
      // 利用对象原型的共用的特点实现的
      // 是否缓存数据
      cacehFlag: false,
      // 缓存的所有table数据
      totalTableData: [],
      // --------------------缓存数据的变量(end)--------------------
      idName: "id",
    };
  },
  created() {},
  watch: {
    tableData: {
      deep: true,
      immediate: true,
      handler() {
        // 缓存时触发
        if (this.cacehFlag) {
          let tempObj = {};
          let ids = [];
          this.totalTableData.map((item) => {
            const { id } = item;
            tempObj[id] = item;
            ids.push(id);
          });
          this.tableData.map((item) => {
            const { id } = item;
            if (ids.includes(id)) {
              Object.assign(tempObj[id], item);
            }
          });
        }
      },
    },
  },
  methods: {
    /**
     * 拉取上一页的数据，单个删除使用
     */
    backPrePageWhenDelOne() {
      if (this.tableData.length === 1 && this.currentPage !== 1) {
        this.currentPage -= 1;
      }
    },
    /**
     * 拉取上一页的数据，批量删除使用
     */
    backPrePageWhenDelMany() {
      if (this.tableData.length === this.multipleSelection.length && this.currentPage !== 1) {
        this.currentPage -= 1;
      }
    },
    /**
     * 分页器的点击事件
     * @return {Number} 一页多少条数据
     */
    handleSizeChange(val) {
      // 返回第一页
      this.currentPage = 1;
      this.pageSize = val;
      this.getTableData();
    },
    /**
     * 切换页码的点击事件
     * @param  {Number} val 当前点击的页码
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    /**
     * 格式化提交的参数
     */
    postDataFormat() {
      const tempObj = this.searchObjFormat ? this.searchObjFormat() : this.searchObj;
      // 清空没有值的字段
      return this.$clearEmptyObjAttritube(tempObj);
    },
    /**
     * 获取列表数据
     * @param  {Object}  obj  分页之外的其他参数
     */
    // async otherSyncMethod1() {
    //   const data = await DictKeys('field_default_type')
    //   return data
    // },
    // async otherSyncMethod2() {
    //   const data = await DictKeys('parameter_format')
    //   return data
    // },
    // async otherSyncMethod() {
    //   return [
    //     await this.otherSyncMethod1(),
    //     await this.otherSyncMethod2(),
    //   ]
    // },
    async getTableData() {
      if (!this.getTableListSyncMethod) return false;
      try {
        // containerLoading，设置面板整体的loading状态
        if (this.containerLoading === false && this.firstLoad) {
          this.containerLoading = true;
        } else {
          this.loading = true;
        }
        // table初始化之前需要执行的异步方法(一般会用来设置header中from的默认搜索条件)
        if (this.firstLoad && this.loadTableInitDataBySyncMethod) {
          await this.loadTableInitDataBySyncMethod();
        }
        // 判断是否进行额外接口处理
        const hasOtherSyncMethod = this.firstLoad && this.otherSyncMethod;
        const [tableList, ...otherData] = await Promise.all([
          this.getTableList(),
          ...[hasOtherSyncMethod && this.otherSyncMethod()],
        ]);
        // 进行额外接口数据处理
        if (hasOtherSyncMethod) {
          this.otherSyncDataFormat(otherData);
        }
        if (tableList) {
          const { records, total, ...restParams } = tableList;
          if (this.isPageData) {
            // 分页数据
            // 格式化后台返回的数据，有些不需要格式化，直接赋值
            this.tableData = this.tableDataFormat ? this.tableDataFormat(records) : records;
            this.total = total;
          } else {
            // 不分页数据
            this.tableData = this.tableDataFormat ? this.tableDataFormat(tableList) : tableList;
            await this.$nextTick();
          }
          // 根据列表数据，做其他操作
          this.otherDataOperation && this.otherDataOperation({ arr: this.tableData, restParams });
          this.tempRefreshKey && (this.tempRefreshKey = Date.now());
          // 回显数据
          if (this.multipleFlag) {
            this.setRowChecked();
          }
          // 设置totalTableData缓存数据
          if (this.cacehFlag) {
            this.setCacheData();
          }
        }
      } catch (e) {
        console.log(e);
        this.containerLoading = false;
        // 接口报错的额外处理
        this.handleError && this.handleError();
      } finally {
        if (!this.dynamicLoadingFlag) {
          if (this.containerLoading === true && this.firstLoad) {
            this.containerLoading = false;
          } else {
            this.loading = false;
          }
          this.firstLoad = false;
        }
      }
    },
    /**
     * 获取列表数据
     */
    async getTableList() {
      try {
        const data = await this.getTableListSyncMethod({
          ...(this.isPageData && {
            current: this.currentPage,
            size: this.pageSize,
          }),
          ...this.postDataFormat(),
        });
        return data;
      } catch (e) {
        console.log(e.message);
      }
    },
    /**
     * 搜索
     */
    doSearch(obj = {}) {
      let objs = obj;
      // 返回第一页
      this.currentPage = 1;
      if (Object.prototype.hasOwnProperty.call(objs, "tagIds")) {
        let { tagIds } = objs;
        Object.assign(objs, {
          tagIds: tagIds.length > 0 ? tagIds.join(",") : "",
        });
      }
      objs && (this.searchObj = objs);
      this.getTableData();
    },
    /**
     * 顶栏重置、新增(很奇怪的交互)
     */
    doReset() {
      this.currentPage = 1;
      this.searchObj = {};
      this.getTableData();
    },
    /**
     * 新增、编辑成功的回调
     */
    addOrEditSuccess() {
      if (this.currentId) {
        // 编辑回调
        this.doSearch();
      } else {
        // 新增回调
        this.$refs.pageHeader.doReset();
      }
    },
    /**
     * 刷新数据
     */
    doRefresh() {
      this.doReset();
      if (this.multipleFlag) {
        this.checkedData = [];
      }
    },
    /**
     * 默认的多选事件
     */
    selectionChange(val) {
      const curTableIds = this.tableData.map((item) => item[this.idName]);
      const curCheckedIds = val.map((item) => item[this.idName]);
      let tempArr = [];
      // 删掉旧值
      this.checkedData.map((item) => {
        const id = item[this.idName];
        // 当前页选中数据 || 非当前页选中数据
        if ((curTableIds.includes(id) && curCheckedIds.includes(id)) || !curTableIds.includes(id)) {
          tempArr.push(item);
        }
      });
      const allCheckedIds = this.checkedData.map((item) => item[this.idName]);
      // 添加新值
      val.map((item) => {
        if (!allCheckedIds.includes(item[this.idName])) {
          tempArr.push(item);
        }
      });
      // 重新赋值
      this.checkedData = tempArr;
      // 选择事件的其他处理
      this.restSelectEvent && this.restSelectEvent(val);
    },
    /**
     * 设置行默认选中
     */
    async setRowChecked() {
      await this.$nextTick();
      const allCheckedIds = this.checkedData.map((item) => item[this.idName]);
      this.tableData.map((item) => {
        const id = item[this.idName];
        if (allCheckedIds.includes(id)) {
          this.$refs.table.toggleRowSelection(item, true);
        }
      });
    },
    /**
     * 设置缓存数据
     */
    setCacheData() {
      const ids = [];
      const obj = {};
      this.totalTableData.map((item) => {
        const { id } = item;
        obj[id] = item;
        ids.push(id);
      });
      this.tableData.map((item) => {
        const id = item[this.idName];
        if (!ids.includes(id)) {
          this.totalTableData.push(item);
        } else {
          Object.assign(item, obj[id]);
        }
      });
    },
  },
};
